const app = getApp()
import http from "../../utils/request.js";
const publicFun = require('../../utils/public');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //右侧分类的高度累加数组
    //比如：[洗车数组的高度，洗车+汽车美容的高度，洗车+汽车美容+精品的高度，...]
    heightArr: [],
    //记录scroll-view滚动过程中距离顶部的高度
    distance: 0,
    currentTab: 0,  //选择项目、选择技师、优惠券
    currentLeft: 0, //左侧选中的下标
    selectId: "item0",  //当前显示的元素id
    scrollTop: 0, //到顶部的距离
    serviceTypes: [
      {type:'洗车',services:[{id:1,name:'取数洗车',price:23}]},
      {type:'洗车',services:[{id:1,name:'取数洗车',price:23}]},
      {type:'洗车',services:[{id:1,name:'取数洗车',price:23}]},
      {type:'洗车',services:[{id:1,name:'取数洗车',price:23}]},
      {type:'洗车',services:[{id:1,name:'取数洗车',price:23}]},
    ], //项目列表数据
    staffList: [],
    coupons: []
  },

  changeTab(e){
    this.setData({currentTab:e.currentTarget.dataset.pos})
  },

  //选择项目左侧点击事件 currentLeft：控制左侧选中样式  selectId：设置右侧应显示在顶部的id
  proItemTap(e) {
      console.log(e)
      this.setData({
        currentLeft: e.currentTarget.dataset.pos,
        selectId: "item" + e.currentTarget.dataset.pos
      })
  },
  
  //计算右侧每一个分类的高度，在数据请求成功后请求即可
  selectHeight() {
      let that = this;
      this.heightArr = [];
      let h = 0;
      const query = wx.createSelectorQuery();
      query.selectAll('.pro-box').boundingClientRect()
      query.exec(function(res) {
        res[0].forEach((item) => {
          h += item.height;
          that.heightArr.push(h);
        })
        console.log(that.heightArr);
        // [160, 320, 1140, 1300, 1570, 1840, 2000]
        // 160：洗车标题高度50px，item的高度110，洗车只有一个item，所以50+110*1=160px;
        // 320: 汽车美容标题高度50px，只有一个item，再加上洗车的高度，所以50+110*1+160=320px;
        // ...
      })
  },
  
  //监听scroll-view的滚动事件
  scrollEvent(event) {
      if (this.heightArr.length == 0) {
        return;
      }
      let scrollTop = event.detail.scrollTop;
      let current = this.data.currentLeft;
      if (scrollTop >= this.distance) { //页面向上滑动
        //如果右侧当前可视区域最底部到顶部的距离 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
        if (current + 1 < this.heightArr.length && scrollTop >= this.heightArr[current]) {
          this.setData({
            currentLeft: current + 1
          })
        }
      } else { //页面向下滑动
        //如果右侧当前可视区域最顶部到顶部的距离 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
        if (current - 1 >= 0 && scrollTop < this.heightArr[current - 1]) {
          this.setData({
            currentLeft: current - 1
          })
        }
      }
      //更新到顶部的距离
      this.distance = scrollTop;
  },

  getImgList(){
    let data = {
      userId: app.globalData.userId,
    }
    http.Request({url:'imgList',method:'POST',data:data}).then(res=>{
      if(res.code == 200){
        console.log(res)
      }
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.selectHeight();
    this.getImgList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})